<template>
	<view class="container">
		<div class="user-xinxi">
			<image :src="userInfo.avatar" mode=""></image>
			<p>{{userInfo.nickname}}</p>
			<div class="txbtn" @click="record('/pages/agent/user/record_tixian')">
				<p>提现记录</p>
				<image src="/static/img/user/fanhui.png" mode=""></image>
			</div>
		</div>
		
		<div class="add-form">
			<div class="form-item">
				<p>可提现金额(元)</p>
				<input type="number" value="" placeholder="" disabled v-model="userInfo.money" />
			</div>
			<!-- <div class="form-item">
				<p><span style="color: #F95452;">*</span>姓名</p>
				<input type="text" value="" placeholder="请输入姓名" v-model="formData.realname" />
			</div> -->
			<div class="form-item">
				<p style="width: 126px;"><span style="color: #F95452;">*</span>提现方式</p>
				<u-input v-model="cashtype" :type="type" :border="border" @click="typeShow = true" />
				<u-action-sheet :list="typeList" v-model="typeShow" @click="actionSheetCallback"></u-action-sheet>
			</div>
			<div class="form-item" v-if="formData.type == 'bank' && hasCard">
				<p><span style="color: #F95452;">*</span>银行卡账号</p>
				<input type="number" value="" placeholder="请输入卡号" v-model="formData.bank_card" />
			</div>
			<div class="form-item" v-if="formData.type == 'bank' && hasCard">
				<p><span style="color: #F95452;">*</span>银行名称</p>
				<input type="text" value="" placeholder="请输入银行名称" v-model="formData.bank_name" />
			</div>
			<div class="add-card" v-if="formData.type == 'bank' && !hasCard" @click="toCard">
				<image src="/static/img/user/tianjia.png" mode=""></image>
				<p>添加银行卡</p>
			</div>
			<div class="form-item" v-if="formData.type == 'alipay' && hasAipay">
				<p><span style="color: #F95452;">*</span>支付宝账号</p>
				<input type="text" value="" placeholder="请输入支付宝账号" v-model="formData.ali_account" />
			</div>
			<div class="form-item" v-if="formData.type == 'alipay' && hasAipay">
				<p><span style="color: #F95452;">*</span>支付宝姓名</p>
				<input type="text" value="" placeholder="请输入支付宝姓名" v-model="formData.ali_name" />
			</div>
			<div class="add-card" v-if="formData.type == 'alipay' && !hasAipay" @click="toAipay">
				<image src="/static/img/user/tianjia.png" mode=""></image>
				<p>添加支付宝</p>
			</div>
			<div class="form-item">
				<p><span style="color: #F95452;">*</span>提现金额</p>
				<input type="number" value="" placeholder="请输入提现金额" v-model="formData.money" />
			</div>
			<div class="form-item">
				<p>手机号码</p>
				<input type="number" value="" disabled placeholder="请输入手机号码" v-model="mobile" />
			</div>
			<div class="form-item">
				<p><span style="color: #F95452;">*</span>验证码</p>
				<input type="text" v-model="formData.code" placeholder="请输入" />
				<view class="sendCode" @click="showBtn = false; cutTime(60)">{{ showBtn ? '获取验证码' : num + 'S' }}</view>
			</div>
		</div>

		<div class="txbutton" @click="submit">立即提现</div>
		
		<div class="wenxintishi">
			<p>温馨提示:</p>
			<p>1.可提现时间为国家法定工作日，9:00-16:00。</p>
			<p>2.单笔提现金额最高1000元；单日最高5000元。</p>
			<p>3.提现后，账户余额需大于1元。</p>
		</div>
	</view>
</template>

<script>
import { bankDetail, cash, sendCode } from '../../../api/api.js'
export default {
	data() {
		return {
			hasCard: false,
			hasAipay: false,
			formData: {
				type: '',
				code: '',
				realname: '',
				bank_name:'',
				bank_card:'',
				money: '',
				ali_account: '',
				ali_name: ''
			},
			mobile: '',
			userInfo: {},
			type: 'select',
			border: true,
			typeShow: false,
			cashtype: '',
			typeList: [
				{
					value: 'alipay',
					text: '支付宝'
				},
				{
					value: 'bank',
					text: '银行卡'
				}
			],
			showBtn:true,
			num:60,
			timer:null
		}
	},
	onLoad() {
		console.log(uni.getStorageSync('user'), 'userInfouserInfo');
		this.userInfo = uni.getStorageSync('user');
		this.mobile = this.userInfo.mobile;
	},
	onShow() {
		this.getBankInfo();
	},
	methods: {
		cutTime(num){
			if(this.mobile){
				this.timer = setInterval(()=>{
					num--;
					if(num>0){
						this.showBtn = false
						this.num = num;
					}else{
						this.showBtn = true;
						clearInterval(this.timer)
					}
					
				},1000)
				sendCode({
					mobile: this.mobile,
					event: 'notice'
				}).then(res => {
					console.log(res)
					uni.showToast({
						icon: 'none',
						title: res.msg
					})
				})
			}else{
				uni.showToast({
					icon: 'none',
					title: '请输入手机号码'
				})
				return
			}
			
		},
		getBankInfo() {
			bankDetail().then(res => {
				console.log(res.data, 'getBankInfo');
				if(res.code === 1){
					if(res.data.bank && res.data.bank_card) {
						this.hasCard = true;
						this.formData.bank_name = res.data.bank;
						this.formData.bank_card = res.data.bank_card.substring(res.data.bank_card.length-4,res.data.bank_card.length);
					} else {
						this.hasCard = false;
					}
					if(res.data.ali_name && res.data.ali_account) {
						this.hasAipay = true;
						this.formData.ali_name = res.data.ali_name;
						this.formData.ali_account = res.data.ali_account;
					} else {
						this.hasAipay = false;
					}
				} else {
					this.hasCard = false;
					this.hasAipay = false;
				}
			})
		},
		// 点击actionSheet回调
		actionSheetCallback(index) {
			this.cashtype = this.typeList[index].text;
			this.formData.type = this.typeList[index].value;
		},
		toCard() {
			uni.navigateTo({
				url: '/pages/agent/user/card'
			})
		},
		toAipay() {
			uni.navigateTo({
				url:'/pages/agent/user/band_zhifubao'
			})
		},
		record(url) {
			uni.navigateTo({
				url: url
			})
		},
		submit() {
			if (!this.formData.money) {
				uni.showToast({
					icon: 'none',
					title: '请输入可提现金额'
				})
				return
			}
			if (!this.formData.code) {
				uni.showToast({
					icon: 'none',
					title: '请输入验证码'
				})
				return
			}
			// if (!this.formData.realname) {
			// 	uni.showToast({
			// 		icon: 'none',
			// 		title: '请输入姓名'
			// 	})
			// 	return
			// }
			if(Number(this.formData.money) > Number(this.userInfo.money)){
				uni.showToast({
					icon: 'none',
					title: '超过可提现最大金额'
				})
				return
			}
			
			if(this.formData.money == 0){
				uni.showToast({
					icon: 'none',
					title: '提现金额请大于0'
				})
				return
			}
			
			cash(this.formData).then(res=>{
				console.log(res)
				if(res.code == 1){
					uni.showModal({
						title: '提示',
						content: '申请提现成功，请等工作人员审核',
						showCancel: false,
						success: function(res) {
							uni.reLaunch({
								url: '/pages/agent/user'
							})
						}
					})
				}
			})
		}
	}
}
</script>

<style scoped lang="scss">
.container {
	width: 100%;
	height: 100%;
	background: #F7F7F7;
	.user-xinxi{
		width: 100%;
		height: 214px;
		background: url('../../../static/img/agent/addbg.png') no-repeat center;
		background-size: 100% 100%;
		padding-top: 20px;
		image{
			width: 60px;
			height: 60px;
			margin: 10px auto;
			display: block;
			border-radius: 50%;
		}
		p{
			font-weight: 600;
			font-size: 18px;
			color: #FFFFFF;
			text-align: center;
		}
		.txbtn{
			width: 87px;
			height: 24px;
			background: #FFFFFF;
			box-shadow: 0px 0px 4px 0px rgba(20,135,255,0.4);
			border-radius: 12px;
			display: flex;
			align-items: center;
			margin: 20px auto;
			p{
				font-weight: 400;
				font-size: 14px;
				color: #49A1FD;
				margin-left: 10px;
			}
			image{
				width: 7px;
				height: 12px;
			}
		}
	}
	
	.add-form{
		width: 85%;
		background: url('../../../static/img/agent/formbg.png') no-repeat center;
		background-size: 100% 100%;
		position: absolute;
		top: 180px;
		left: calc((15% - 52px) / 2);
		padding: 26px;
		.form-item{
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin-bottom: 10px;
			position: relative;
			p{
				font-weight: 800;
				font-size: 15px;
				color: #000000;
			}
			input {
				width: 203px;
				height: 44px;
				background: #FFFFFF;
				border-radius: 6px;
				border: 1px solid #F6F6F6;
				padding-left: 10px;
			}
			.sendCode{
				font-weight: 400;
				font-size: 14px;
				color: #05A3FF;
				position: absolute;
				right: 10px;
				top: 15px;
			}

		}
		.add-card{
			width: 310px;
			height: 84px;
			background: #FBFBFB;
			border-radius: 6px;
			border: 1px solid #F6F6F6;
			margin: 10px auto;
			image{
				width: 24px;
				height: 24px;
				display: block;
				margin: 15px auto 10px auto;
			}
			p{
				font-weight: 400;
				font-size: 14px;
				color: #9A9A9A;
				text-align: center;
			}
		}
	}
	
	.txbutton{
		width: 92%;
		height: 44px;
		background: linear-gradient( 311deg, #93A4FB 0%, #2F9AFE 100%);
		box-shadow: 0px 2px 6px 0px rgba(20,135,255,0.4);
		border-radius: 22px;
		font-weight: 500;
		font-size: 17px;
		color: #FFFFFF;
		text-align: center;
		line-height: 44px;
		margin: 480px auto 20px auto;
	}
	.wenxintishi{
		font-weight: 400;
		font-size: 14px;
		color: #A7A5A5;
		line-height: 26px;
		padding: 15px;
	}
	
}
</style>